You can either edit the sprite we have provided (which is easier), or you can create your own.
A sprite is a single image that combines several commonly used images into one file. CSS then defines which part of the image is displayed for various purposes. Using sprites reduces load time for your website, because your server only has to load a single image instead of several. The new sample sites use sprites where possible to improve performance. The image below shows a sprite used in Aspen and labels where each image is used in the theme:
You can either edit the sprite we have provided (which is easier), or
you can create your own.
When you edit the provided sprite, keep all the elements in their original pixel coordinates, so that you do not have to edit the related CSS. The .png version of the sprite is located in images/[theme]_sprite.png. You can edit this image in your favorite image editor, but we do not recommend editing in MS Paint, because you will lose the background transparency. Your theme’s \Resource folder also includes a .psd source file of each sprite. You can edit the .psd with Photoshop or GIMP, a free image editor that can edit and save images in .psd and web-safe formats. If you edit the .psd, save your new image as a .png, and place it in the images folder of your theme.
You also have the option to create your own sprite, which will give you greater design control. In this case, you may also have to update your theme CSS for the new coordinates of the sprite. To help you with this process, we recommend the following resources:
■ CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
■ Sprite Cow calculates the pixel positions of the various images inside your sprite.
■ CSS Sprite Generator lets you upload a zip file of images and get back a sprite file with the corresponding CSS.